<template>
  <view class="container">
    <view
      class="list-cell b-b m-t"
      hover-class="cell-hover"
      :hover-stay-time="50"
      @click="navTo('个人资料')"
    >
      <text class="cell-tit">
        个人资料
      </text>
      <text class="cell-more yticon icon-you" />
    </view>
    <view
      class="list-cell b-b"
      hover-class="cell-hover"
      :hover-stay-time="50"
      @click="navTo('收货地址')"
    >
      <text class="cell-tit">
        收货地址
      </text>
      <text class="cell-more yticon icon-you" />
    </view>
    <view
      class="list-cell"
      hover-class="cell-hover"
      :hover-stay-time="50"
      @click="navTo('实名认证')"
    >
      <text class="cell-tit">
        实名认证
      </text>
      <text class="cell-more yticon icon-you" />
    </view>
		
    <view class="list-cell m-t">
      <text class="cell-tit">
        消息推送
      </text>
      <switch
        checked
        color="#fa436a"
        @change="switchChange"
      />
    </view>
    <view
      class="list-cell m-t b-b"
      hover-class="cell-hover"
      :hover-stay-time="50"
      @click="navTo('清除缓存')"
    >
      <text class="cell-tit">
        清除缓存
      </text>
      <text class="cell-more yticon icon-you" />
    </view>
    <view
      class="list-cell b-b"
      hover-class="cell-hover"
      :hover-stay-time="50"
      @click="navTo('关于Dcloud')"
    >
      <text class="cell-tit">
        关于Dcloud
      </text>
      <text class="cell-more yticon icon-you" />
    </view>
    <view class="list-cell">
      <text class="cell-tit">
        检查更新
      </text>
      <text class="cell-tip">
        当前版本 1.0.3
      </text>
      <text class="cell-more yticon icon-you" />
    </view>
    <view
      class="list-cell log-out-btn"
      @click="toLogout"
    >
      <text class="cell-tit">
        退出登录
      </text>
    </view>
  </view>
</template>

<script>
import {  
	mapMutations  
} from 'vuex'
export default {
  data() {
    return {
				
    }
  },
  methods:{
    ...mapMutations(['logout']),

    navTo(url){
      this.$api.msg(`跳转到${url}`)
    },
    // 退出登录
    toLogout(){
      uni.showModal({
        content: '确定要退出登录么',
        success: (e) => {
          if(e.confirm){
            this.logout()
            setTimeout(() => {
              uni.navigateBack()
            }, 200)
          }
        }
      })
    },
    // switch
    switchChange(e){
      const statusTip = e.detail.value ? '打开' : '关闭'
      this.$api.msg(`${statusTip}消息推送`)
    },

  }
}
</script>

<style lang='scss'>
	page{
		background: $page-color-base;
	}
	.list-cell{
		display:flex;
		align-items:baseline;
		padding: 20rpx $page-row-spacing;
		line-height:60rpx;
		position:relative;
		background: #fff;
		justify-content: center;
		&.log-out-btn{
			margin-top: 40rpx;
			.cell-tit{
				color: $uni-color-primary;
				text-align: center;
				margin-right: 0;
			}
		}
		&.cell-hover{
			background:#fafafa;
		}
		&.b-b:after{
			left: 30rpx;
		}
		&.m-t{
			margin-top: 16rpx; 
		}
		.cell-more{
			align-self: baseline;
			font-size:$font-lg;
			color:$font-color-light;
			margin-left:10rpx;
		}
		.cell-tit{
			flex: 1;
			font-size: $font-base + 2rpx;
			color: $font-color-dark;
			margin-right:10rpx;
		}
		.cell-tip{
			font-size: $font-base;
			color: $font-color-light;
		}
		switch{
			transform: translateX(16rpx) scale(.84);
		}
	}
</style>
